<template>
  <div v-if="visible" class="modal-overlay">
    <div class="login-modal" @click.stop>
      <div class="modal-header">
        <h3 class="modal-title">用户登录</h3>
        <button class="close-btn" @click="handleClose">&times;</button>
      </div>
      
      <div class="modal-body">
        <form @submit.prevent="handleSubmitLogin" class="login-form">
          <!-- 用户名 -->
          <div class="form-group">
            <label for="loginUser" class="form-label">手机号</label>
            <input
              type="text"
              id="loginUser"
              v-model="loginForm.user"
              class="form-input"
              :class="{ 'error': loginErrors.user }"
              placeholder="请输入手机号"
            />
            <span v-if="loginErrors.user" class="error-message">{{ loginErrors.user }}</span>
          </div>

          <!-- 密码 -->
          <div class="form-group">
            <label for="loginPwd" class="form-label">密码</label>
            <input
              type="password"
              id="loginPwd"
              v-model="loginForm.pwd"
              class="form-input"
              :class="{ 'error': loginErrors.pwd }"
              placeholder="请输入密码"
            />
            <span v-if="loginErrors.pwd" class="error-message">{{ loginErrors.pwd }}</span>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button class="btn-cancel" @click="handleClose">取消</button>
        <button 
          class="btn-confirm" 
          @click="handleSubmitLogin"
          :disabled="isLoading"
        >
          <span v-if="isLoading">登录中...</span>
          <span v-else>立即登录</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { login } from '@/api/home'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

// Events  
const emit = defineEmits(['close', 'login-success'])

// 数据
const isLoading = ref(false)

// 登录表单数据
const loginForm = reactive({
  user: '',
  pwd: ''
})

const loginErrors = reactive({
  user: '',
  pwd: ''
})

// 验证登录表单
const validateLoginForm = () => {
  let isValid = true
  
  // 重置错误信息
  loginErrors.user = ''
  loginErrors.pwd = ''
  
  // 验证用户名/手机号
  if (!loginForm.user.trim()) {
    loginErrors.user = '请输入手机号或用户名'
    isValid = false
  }
  
  // 验证密码
  if (!loginForm.pwd) {
    loginErrors.pwd = '请输入密码'
    isValid = false
  } else if (loginForm.pwd.length < 6) {
    loginErrors.pwd = '密码至少需要6位字符'
    isValid = false
  }
  
  return isValid
}

// 提交登录
const handleSubmitLogin = async () => {
  if (!validateLoginForm()) {
    return
  }
  
  isLoading.value = true
  try {
    // 调用登录API
    const response = await login(loginForm)

    ElMessage.success('登录成功！欢迎回来！')
    
    // 通知父组件登录成功
    emit('login-success', response)
    
    // 重置表单并关闭
    resetForm()
    
  } catch (error) {
    ElMessage.error('登录失败，请检查用户名和密码')
  } finally {
    isLoading.value = false
  }
}

// 关闭模态框
const handleClose = () => {
  resetForm()
  emit('close')
}

// 重置表单
const resetForm = () => {
  loginForm.user = ''
  loginForm.pwd = ''
  loginErrors.user = ''
  loginErrors.pwd = ''
}

// 暴露方法和数据给父组件
defineExpose({
  resetForm,
  loginForm
})
</script>

<style scoped>
/* 模态框 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-modal {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  color: #333;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
  transform: scale(1.1);
}

.modal-body {
  padding: 25px;
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-input {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #3742fa;
  box-shadow: 0 0 0 2px rgba(55, 66, 250, 0.1);
}

.form-input.error {
  border-color: #ff4757;
  box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.1);
}

.error-message {
  font-size: 12px;
  color: #ff4757;
  margin-top: 4px;
}

.modal-footer {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  padding: 20px 25px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.btn-cancel {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid;
  background: #f5f5f5;
  color: #666;
}

.btn-confirm {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid;
  background: #3742fa;
  color: white;
}

.btn-confirm:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>
